import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import './style.scss';

export default defineComponent({
  name: 'CompList',
  props: {
    data: Array,
  },
  render(props) {
    const router = useRouter();
    const formatData = new Array(6).fill({}).map((d, index) => {
      return props?.data?.[index] ?? { company_name: '' };
    });

    return (
      <ul id="CompList">
        {formatData?.map?.((d) => {
          const {
            company_name = '',
            legal_person_name = '-',
            reg_date = '',
            qualifications = [],
            apno_cnt,
            inno_score,
            company_id = '',
          } = d;

          return (
            <li
              class="card"
              onClick={() => {
                if (company_name) {
                  router.push({ path: `/insight/company/${company_id}` });
                }
              }}
            >
              {company_name ? (
                <>
                  {/* 边框四个角 */}
                  <img src={require('@assets/bg_left_top.png')} />
                  <img src={require('@assets/bg_left_top.png')} />
                  <img src={require('@assets/bg_left_top.png')} />
                  <img src={require('@assets/bg_left_top.png')} />
                  <main>
                    <h1>{company_name}</h1>
                    <p class="compInfo">
                      <aside>
                        <span>法定代表人： </span>
                        {legal_person_name || '-'}
                      </aside>
                      <aside>
                        <span>注册时间： </span>
                        {reg_date || '-'}
                      </aside>
                    </p>
                    {/* 蓝色标签块 */}
                    <ul>
                      {qualifications?.map?.((t) => {
                        return <li class="tag">{t}</li>;
                      })}
                    </ul>
                  </main>
                  <footer>
                    <section>
                      <img src={require('@assets/img_detail_zl.png')} />
                      {apno_cnt || '-'}
                      <span> 件</span>
                    </section>

                    <aside>
                      <b>
                        {Number(inno_score).toFixed(2) || '-'}
                        <span>分</span>
                      </b>

                      <div>查看详情</div>
                    </aside>
                  </footer>
                </>
              ) : (
                <div class="card_null">
                  <img src={require('@assets/img_null.png')} width={56} height={74} />
                </div>
              )}
            </li>
          );
        })}
      </ul>
    );
  },
});
